<template>
	<div>
		<div v-if="!assistancesData.invalidFlag"   class="curriculum-assistance web">
		<img src="./assets/bg-top.jpg" class="bg-top">
		<!-- 活动状态  -->
		<div class="status-wrap">
			<p class="text">活动剩余时间</p>
			<p class="text"><em class="tiem-text">{{remainingTime[0]}}</em>天<em>{{remainingTime[1]}}</em>小时</p>
			<div class="btn-wrap">
					<div class="btn" @click="handleHelp" :class="{'complete': hasAssistance}">{{helpText}}</div>
					<img src="./assets/leaf-s.png" class="leafImg">
			</div>
		</div>
		<p class="checkStatus-text" @click="handleCheckMy">查看我的助力情况 <span class="iconfont icon-arrow-right"></span></p>

		<!-- 课程 音频 -->
		<div class="section  paddingBottm">
			<div class="triangle"></div>
			<div class="title-assist">防套路指南免费送<div class="tail"></div></div>
			<div class="section-title">
				<div class="title-wrap"><img src="./assets/title1.png" class="titleImgOne"></div>
			</div>
			<!-- 音频 s -->
			<div class="audio-wrap">
				<div class="audio-btn" :class="isPlay ? 'pause' : 'play'" @click="togglePlay"></div>
				<y-progress-bar :currentTime="currentTime" :endTime="endTime"  :currentTimeChange="changeCurrentTime"
				:hiddenTime="true" class="progress-bar"/>
				<div class="time" >{{assistancesData.duration  | filterSeconds}}</div>
				<p class="assist-text-complete">试听</p>
				<audio
					:src="assistancesData.audioUrl"
					ref="audioRef" 
					preload="auto" 
					@timeupdate="updateTime"
					@ended="isPlay = false"
					></audio>
			</div>
			<!-- 音频 E -->
			<div class="price-text">
				<em>限时免费</em> 价值668元防套路恋爱能力提升系列课程。
			</div>
			<div class="timeImg" v-if="assistancesData.startDate">{{transformTime(assistancesData.startDate)}} 至 {{transformTime(assistancesData.endDate)}}</div>
		</div>

		<!-- 助力情况 -->
		<div class="section decorateBg">
			<div class="triangle positionR"></div>
			<div class="section-title">
				<div class="title-wrap"><img src="./assets/title3.png" class="titleImgThree"></div>
			</div>
			<p class="text-assist">{{assistancesData.totalNum}}名好友助力，免费得课程</p>
			<div class="info-wrap-web">
					<div class="user-wrap" v-if="assistancesData.userNickName && assistancesData.userNickName.indexOf('失恋')">
						<img :src="assistancesData.userImg" class="user-img"/>
						<div class="user-name">{{assistancesData.userNickName}}</div>
					</div>
					<div class="user-wrap" v-if="assistancesData.userNickName && !assistancesData.userNickName.indexOf('失恋')">
						<div class="user-name">用户 {{assistancesData.userPhone}}</div>
					</div>
					<p class="text-countInfo"><em>{{assistancesData.assistanceCount > 0 ? assistancesData.assistanceCount : assistancesData.totalNum - assistancesData.surplusNum}}</em>人帮忙助力，还差<em>{{assistancesData.surplusNum}}</em> 人</p>
					<!-- <p class="text-countInfos" v-if="activityAssistanceUserVOList.length > 0">
						<span>已助力好友：</span>
						<em v-for="item of activityAssistanceUserVOList.slice(0, 2)">{{item.userPhone}}</em>
						<div class="more" v-if="activityAssistanceUserVOList.length > 2">......</div>
					</p> -->
			</div>
		</div>
		<img src="./assets/bg-bottom.png" class="bg-bottom">
		<div class="joinActivity" @click="handleJoinAct"></div>
		<y-assistance-mask  @handleClose="handleClose"   @shareAssist="shareAssist"  @handleOpenAppAssist="handleOpenAppAssist" v-if="showAssistanceMask" :assistanceStatus="assistanceStatus" />
		<div class="open_app_fail_tips"  v-show="showFailTips" @click="showFailTips = false">
			<div class="tips_main"></div>
		</div>
	</div>
	<div class="activity-over" v-if="assistancesData.invalidFlag">
		<div class="activity-over-img"></div>
		<p class="text">亲，活动已结束！</p>
		<p class="assist-text">下次记得早点来哦~</p>
	</div>
	</div>
</template>
<script>
	import code from './data/code.json';
	import ProgressBar from '../components/progress-bar';
	import YAssistanceMask from './components/assistance-mask';
	import { handleOpenApp } from '../../../js/open-app';
	export default {
		components: {
			[ProgressBar.name]: ProgressBar,
			[YAssistanceMask.name]: YAssistanceMask,
		},
		data() {
			return {
				isPlay: false,
				assistancesData: {},
				remainingTime: [],
				currentTime: 0,
				endTime: 0,
				audioEnd: false,
				showAssistanceMask: false,
				activityAssistanceUserVOList: [],
				assistanceStatus: '', // 1帮助助力, 2参加活动, 3查看我的助力情况  // 4 完成助力
				showFailTips: false,
				hasAssistance: false,
				helpText: '帮TA助力'
			}
		},
		computed: {
		},
		methods: {
			togglePlay() {
				this.isPlay = !this.isPlay;
				if (this.isPlay) {
					this.$refs.audioRef.play();
				} else {
					this.$refs.audioRef.pause()
				}
			},

			// 目前的播放位置已更改时触发
			updateTime(e) {
				this.currentTime = e.target.currentTime;
				if (this.currentTime === this.endTime) {
					this.isPlay = false;
				}
			},

			// 当前播放时间修改
			changeCurrentTime(currTime) {
				currTime = currTime < 0 ? 0 : currTime > this.endTime ? this.endTime : currTime;
				this.$refs.audioRef.currentTime = currTime;
			},

			handleClose() {
				this.showAssistanceMask = false;
				this.assistanceStatus = '';
				this.fetchData();
			},
			async handleHelp() {
				if (!this.hasAssistance) {
					this.showAssistanceMask = true;
					this.assistanceStatus = '4';
					let params = {
						activityCode: code.activityCode,
						shareUserId: this.$route.params.userid,
					}
					// 点击助力完成
					let res = await this.$http.post(`/lovelorn/v1.3/pb/activity-assistances/action/assistance`, params);
					this.hasAssistance = true;
					this.helpText = '已助力';
				}
			},
			handleJoinAct() {
				this.showAssistanceMask = true;
				this.assistanceStatus = '2'; 
			},
			handleCheckMy() {
				this.showAssistanceMask = true;
				this.assistanceStatus = '3';
			},

			transformTime(time) {
				return time.slice(0, 10);
			},

			handleOpenAppAssist(arg) {
				let props = {
					props: {url: `${window.location.origin}/official-activity/curriculum-assistance`},
					routerAddr: 'JSBridge',   // app内页面地址路径
				}
				handleOpenApp(props)
			},

			shareAssist(arg) {
				this.showAssistanceMask = false;
				this.showFailTips = true;
				let shareData = {
					title: '帮个忙吧！差一个人就成功了！',
					desc: '668元防套路课程免费得，点击助力～',
					imgUrl: 'https://cdn.yryz.com/lovelorn/image/ios/201905/EFB4CF9B-0A59-4050-9B8A-DD882786D38B.jpg',
					link: `${window.location.origin}/official-activity/curriculum-assistance-web/${arg.userId}`,
				}
				if (this.$utils.isWeiXin()) {
					this.$utils.wxShare(shareData)
				}
				if (this.$utils.isMobileQQ()) {
					this.$utils.qqShare(shareData)
				}
			},

			async fetchData() {
				let params = {
					activityCode: code.activityCode,
					targetUserId: this.$route.params.userid
				}
				let res = await this.$http.get(`/lovelorn/v1.3/pb/activity-assistances/action/getAssistanceByUserId`, {params})
				this.assistancesData = res.data.data;
				this.remainingTime = this.assistancesData.surplusDate.split('/');
				this.endTime = this.assistancesData.duration;
				this.activityAssistanceUserVOList = this.assistancesData.activityAssistanceUserVOList;
			}
		},
		mounted() {
			this.fetchData();
			if (this.$utils.isWeiXin()) {
				this.$utils.wxShare({
					title: '帮个忙吧！差一个人就成功了！',
					desc: '668元防套路课程免费得，点击助力～',
					link: `${window.location.origin}/official-activity/curriculum-assistance-web/${this.$route.params.userid}`,
					imgUrl: 'https://cdn.yryz.com/lovelorn/image/ios/201905/EFB4CF9B-0A59-4050-9B8A-DD882786D38B.jpg', 
				})
			}
		}
	}
</script>
<style>
	@import './style.css';
</style>